<template>
	<!-- 系统设置 -->
	<div class="page">
		<!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">用户管理</span>　|　<span>编辑用户</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="width:99.5%;margin-top:0.3rem;"> -->
		<!-- <el-tabs v-model="activeName" type="border-card"  style="width:99.5%;margin-top:0.3rem;padding:0!important;"> -->
		<!-- <div class="bottom_top" @click="changeBox">
			<div class="info" id="info"        :class="box=='info'?'cardActive':''">用户信息</div>
			<div class="pass" id="pass"        :class="box=='pass'?'cardActive':''">重置密码</div>
		</div> -->
	    <el-form :model="form" block class="addform">
			<el-form-item label="电脑端登录页标题:" :label-width="formLabelWidth">
				<el-input v-model="form.pc_title" auto-complete="off" class="inpu" placeholder="请输入用户名称"></el-input>
			</el-form-item>
			<el-form-item label="电脑端登录框位置:" :label-width="formLabelWidth" class="formline">
				<el-select v-model="form.pc_position" class="inpu">
					<el-option v-for="item in positionTypes" :value="item.value" :key="item.value" :label="item.label">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="电脑端登录背景图:" :label-width="formLabelWidth" style="margin-top:-0.15rem;">
				<div class="newimg">
					<img id="newpcbg"  :src="baseurl+form.pc_bg" class="thumbpcbg" />
					<input type="file" accept="image/*"  id="pcbg" @change="addUpload_1" />
					<div class="clickTip" >点击上图可上传（或更换）图片</div>
				</div>
			</el-form-item>
			<el-form-item label="电脑端网站Logo:" :label-width="formLabelWidth">
				<div class="newimg">
					<img id="newpclogo" :src="baseurl+form.site_logo" class="thumbpclogo" />
					<input type="file" accept="image/*"  id="pclogo" @change="addUpload_3" />
					<div class="clickTip" >点击上图可上传（或更换）图片</div>
				</div>
			</el-form-item>
			<el-form-item label="移动端登录背景图:" :label-width="formLabelWidth">
				<div class="newimg">
					<img id="newmobilebg" :src="baseurl+form.app_bg" class="thumbmobilebg" />
					<input type="file" accept="image/*"  id="mobilebg" @change="addUpload_2" />
					<div class="clickTip" >点击上图可上传（或更换）图片</div>
				</div>
			</el-form-item>
			
		</el-form>
		<div style="text-align:left;margin-left:0.7rem;margin-top:-0.2rem;">
			<el-button type="success" size="small" @click="setUpdate">保存</el-button>
			<!-- <el-button type="primary" class="btn" @click="resetForm(form)">重置</el-button> -->
		</div>
	</div>
</template>

<script>
    export default {
        name: 'setSite',
        data() {
            return {
				baseurl:this.$baseurl,
                formLabelWidth: '150px',
				wsPCBG:null,
				wsmobilebg:null,
				wsPCLOGO:null,
                positionTypes:[
					{
						value:'center',
						label:'水平垂直居中'
				    },
					{
						value:'rightCenter',
						label:'右侧垂直居中'
					},
					{
						value:'rightTop',
						label:'页面右上方'
					}
				],
                form: {
					pc_title:'设备监控平台',         //'PC登录页标题',  
					pc_position:'center',          //'PC登录框位置',  
					pc_bg:'',                    //'PC登录背景图片',      
					app_bg:'',                   //'移动端登录背景图片',   
					site_logo:''                //'网站logo' 
                }
			}
        },
        mounted() {
            this.getSetInfo(false);
        },

        methods: {
           getSetInfo(isUpdate) {
                var that = this;
                this.$http({
                    method: 'post',
                    url: 'api/sys/info',
                    data: {}
                }).then(res => {
                    if (res && res.data.result == "success") {
                        for (let key in this.form) {
                            this.form[key] = res.data.data[key];
                        }
						if(!this.form.pc_bg){document.getElementById('newpcbg').src="../../static/noimg.png"};
						if(!this.form.site_logo){document.getElementById('newpclogo').src="../../static/noimg.png"};
						if(!this.form.app_bg){document.getElementById('newmobilebg').src="../../static/noimg.png"};	
					    if(isUpdate){
							//设置网页标签栏名称
							document.title = res.data.data.pc_title;  
							//设置网页标签栏logo
							let linkLogo = document.getElementById('siteIcon');
							linkLogo.href = this.baseurl+res.data.data.site_logo;
						}
					}
                }).catch(error => {
                    console.log(error)
                });
            },
			
			addUpload_1() {
			    this.wsPCBG = null;
			    var that = this;
			    var fileLen = document.getElementById('pcbg').files;
			    var reads = new FileReader();
			    reads.readAsDataURL(fileLen[0]);
			    reads.onload = function(e) {
					let imgSize = that.getImgByteSize(this.result).toFixed(2);
					if(imgSize<500){
						that.wsPCBG = fileLen[0];
			            document.getElementById('newpcbg').src = this.result;
					}else{
						that.$message({
						    message: '电脑背景图片不得超过500KB!',
						    type: 'error',
						    center: true
						});
					}
			    }
			},
			
			addUpload_2() {
			    this.wsmobilebg = null;
			    var that = this;
			    var fileLen = document.getElementById('mobilebg').files;
			    var reads = new FileReader();
			    reads.readAsDataURL(fileLen[0]);
			    reads.onload = function(e) {
					let imgSize = that.getImgByteSize(this.result).toFixed(2);
					if(imgSize<300){
						that.wsmobilebg = fileLen[0];
					    document.getElementById('newmobilebg').src = this.result;
					}else{
						that.$message({
						    message: '手机背景图片不得超过300KB!',
						    type: 'error',
						    center: true
						});
					}
				}
			},
			
			addUpload_3() {
			    this.wsPCLOGO = null;
			    var that = this;
			    var fileLen = document.getElementById('pclogo').files;
			    var reads = new FileReader();
			    reads.readAsDataURL(fileLen[0]);
			    reads.onload = function(e) {
					let imgSize = that.getImgByteSize(this.result).toFixed(2);
					if(imgSize<100){
						that.wsPCLOGO = fileLen[0];
					    document.getElementById('newpclogo').src = this.result;
					}else{
						that.$message({
						    message: '网站Logo不得超过100KB!',
						    type: 'error',
						    center: true
						});
					}
			    }
			},
			
			getImgByteSize(graphicContents) {
				if (graphicContents) { // 获取base64图片byte大小
					const equalIndex = graphicContents.indexOf('='); // 获取=号下标
					if (equalIndex > 0) {
						const str = graphicContents.substring(0, equalIndex); // 去除=号
						const strLength = str.length;
						const fileLength = strLength - (strLength / 8) * 2; // 真实的图片byte大小
						return Math.floor(fileLength)/1024; // 向下取整
					} else {
						const strLength = graphicContents.length;
						const fileLength = strLength - (strLength / 8) * 2;
						return  Math.floor(fileLength)/1024; // 向下取整
					}
				} else {
					return 0;
				}
			},
			
			setUpdate(){
				var that = this;
				var upform = new FormData();
				upform.append("pc_title", that.form.pc_title);
				upform.append("pc_position", that.form.pc_position);
				upform.append("pc_bg", that.wsPCBG?that.wsPCBG:that.form.pc_bg);
				upform.append("site_logo", that.wsPCLOGO?that.wsPCLOGO:that.form.site_logo);
				upform.append("app_bg", that.wsmobilebg?that.wsmobilebg:that.form.app_bg);
				this.$http({
				    method: 'post',
				    url: 'api/sys/update',
				    data: upform
				}).then(res => {
				    if (res && res.data.result == "success") {
				        this.$message({
				            message: '恭喜,系统设置成功!',
				            type: 'success',
				            center: true
				        });
						this.getSetInfo(true)
					}
				}).catch(error => {
				    console.log(error);
			    });
			}
		}
    }
</script>

<style scoped>
    .addform {
       text-align: left;
        margin-top: 0.3rem;
        height: auto;
		width:60%;
        /* border: 1px solid red; */
    }
	
	/* .bottom_top{
		height:0.8rem;
		line-height:0.8rem;
	} */
    
    .inpu {
        width: 5rem;
    }
    
    .formline {
        margin-top: -0.2rem;
    }
    
    #mobilebg,#pcbg,#pclogo{
        border:1px solid red;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 12;
        opacity: 0;
    }
	
	.thumbpcbg,#pcbg{
		width:192px;
		height:108px;
	}
    
    .thumbpclogo,#pclogo{
        width:100px;
        height:100px;
    }
	
    .thumbmobilebg,#mobilebg{
		width:76px;
		height:130px;
	}
	
	.clickTip{
		color: #FF5722;
		font-size: 0.25rem;
		line-height: 0.35rem;
	}
</style>